<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 50px;
            background: #195;
        }
    </style>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body>
    <div class="box1"></div>
    <script>
        /* jQuery框架鼠标移入移除和hover方法 */
        /* $(".box1").on("mouseenter",function(){}) */

        /* 001-mouseenter && mouseleave  鼠标的移入和移除 */
        /* 002-hover方法 */
        /* 003-探索：mouseover && mouseout  */

        // $(".box1").mouseenter(function() {
        //     console.log("mouseenter");
        // })

        // $(".box1").mouseleave(function() {
        //     console.log("mouseleave");
        // })

        /* 语法(1)：jQ.hover(fn1,fn2) */
        /* 第一个回调函数:当鼠标移入的时候会触发该事件函数 */
        /* 第二个回调函数：当鼠标移出的时候会触发该事件函数 */
        // $(".box1").hover(function() {
        //     console.log("mouseenter");
        // }, function() {
        //     console.log("mouseleave");
        // })

        // $(".box1").hover(() => console.log("mouseenter"), () => console.log("mouseleave"))

        /* 语法(2)：jQ.hover(fn) */
        /* 参数：如果该方法直接一个回调函数作为参数，那么鼠标移入和移除事件都会触发该函数 */
        $(".box1").hover(() => console.log("mouseenter || mouseleave"));
    </script>
</body>

</html>